<template>
  <el-container class="profile-page">
    <el-card class="card" :body-style="{ padding: '0px' }">
      <!-- 背景图片 -->
      <div class="background-section" :class="{ 'background-edit': isEditing }">
        <img :src="profile.background" alt="Background" class="background-img" />
      </div>
      <!-- 用户头像 -->
      <div class="avatar-section" :class="{ 'avatar-edit': isEditing }">
        <img :src="profile.avatar" alt="Avatar" class="avatar" />
      </div>
      <!-- 用户信息 -->
      <el-row class="info-section" :gutter="20" :class="{ 'info-edit': isEditing }">
        <template v-if="!isEditing">
          <el-col :span="24">
            <div class="info-item username-item">
              <span>{{ profile.username }}</span>
              <span class="gender">{{ profile.gender }}</span>
              <span>{{ profile.phone }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="info-item">
              <span>{{ profile.class }}</span>
              <label>&emsp;</label>
              <span>{{ profile.studentId }}</span>
              <label>&emsp;</label>
              <span>{{ profile.school }}</span>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="signature-section">
              <p>{{ profile.signature }}</p>
            </div>
          </el-col>
          <el-col :span="24">
            <el-button type="primary" @click="editProfile" class="edit-button">修改个人信息</el-button>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="24">
            <el-form :model="editProfileData" label-width="80px">
              <el-form-item label="用户名">
                <el-input v-model="editProfileData.username"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-input v-model="editProfileData.gender"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="editProfileData.phone"></el-input>
              </el-form-item>
              <el-form-item label="班级">
                <el-input v-model="editProfileData.class"></el-input>
              </el-form-item>
              <el-form-item label="学号">
                <el-input v-model="editProfileData.studentId"></el-input>
              </el-form-item>
              <el-form-item label="学校">
                <el-input v-model="editProfileData.school"></el-input>
              </el-form-item>
              <el-form-item label="签名">
                <el-input type="textarea" v-model="editProfileData.signature"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveProfile">保存</el-button>
                <el-button @click="cancelEdit">取消</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </template>
      </el-row>
    </el-card>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const avatarSrc = require("@/assets/headpic.jpg")
const backgroundSrc = require("@/assets/login.jpg")

// 用户信息
const profile = ref({
  background: backgroundSrc, // 替换为实际背景图片URL
  avatar: avatarSrc, // 替换为实际头像URL
  username: '轻羽飞扬',
  school: '南昌航空大学',
  class: '212012班',
  studentId: '21201222',
  gender: '男',
  phone: '15170020585',
  signature: '这是一段个性签名，展现自我风采。'
})

// 编辑状态
const isEditing = ref(false)
const editProfileData = ref({ ...profile.value })

// 编辑中的用户信息
const editProfile = () => {
  isEditing.value = true
}

const saveProfile = () => {
  Object.assign(profile.value, editProfileData.value)
  isEditing.value = false
  ElMessage({
    message: '个人信息已保存',
    type: 'success',
  })
}

const cancelEdit = () => {
  isEditing.value = false
  editProfileData.value = { ...profile.value }
}
</script>

<style scoped>
.profile-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: #f5f5f5;
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

.card {
  width: 100%;
  max-width: 1100px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}

.background-section {
  position: relative;
  height: 220px; /* 调整背景高度 */
  transition: height 0.3s ease;
}

.background-edit {
  height: 100px; /* 编辑模式下背景高度 */
}

.background-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-section {
  position: absolute;
  top: 150px; /* 调整头像位置 */
  left: 50%; /* 居中头像 */
  transform: translateX(-50%);
  width: 150px; /* 调整头像大小 */
  height: 150px; /* 调整头像大小 */
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
  z-index: 1; /* 确保头像在顶部 */
  transition: top 0.3s ease, transform 0.3s ease;
}

.avatar-edit {
  top: 75px; /* 编辑模式下头像位置 */
  transform: translate(-50%, -50%);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-section {
  padding: 120px 20px 20px; /* 确保信息部分不会被头像遮挡 */
  text-align: left;
  position: relative;
  z-index: 0;
  transition: padding 0.3s ease;
}

.info-edit {
  padding: 60px 20px 20px; /* 编辑模式下信息部分的内边距 */
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* 增加信息项之间的间距 */
  font-size: 15px; /* 增大字体 */
  color: #666;
}

.username-item span {
  font-size: 24px; /* 增大用户名和性别字体 */
  font-weight: bold;
  color: #333;
  margin-right: 20px;
}

.signature-section p {
  font-size: 18px; /* 增大个性签名字体 */
  color: #333;
  margin: 0;
}

.edit-button {
  width: 100%;
  margin-top: 20px;
}
</style>
